<template>
  <div class="mainContainer">
    <div class="tabContainer">
      <div class="verticalTabs">
        <div class="tabList">
          <div
            class="tabItem"
            :class="{ active: selectedKey === 0 }"
            @click="handleTabClick(0)"
          >
            售储企业配置
          </div>
          <div
            class="tabItem"
            :class="{ active: selectedKey === 1 }"
            @click="handleTabClick(1)"
          >
            年度参数配置
          </div>
          <div
            class="tabItem"
            :class="{ active: selectedKey === 2 }"
            @click="handleTabClick(2)"
          >
            月度参数配置
          </div>
        </div>
      </div>
    </div>
    <component :is="currentComponent" />
  </div>
</template>

<script setup>

import EnterpriseConfig from "./components/EnterpriseConfig.vue";
import YearlyConfig from "./components/YearlyConfig.vue";
import MonthlyConfig from "./components/MonthlyConfig.vue";

const selectedKey = ref(0);

const currentComponent = computed(() => {
  switch (selectedKey.value) {
    case 0:
      return EnterpriseConfig;
    case 1:
      return YearlyConfig;
    case 2:
      return MonthlyConfig;
    default:
      return EnterpriseConfig;
  }
});

const handleTabClick = (key) => {
  selectedKey.value = key;
};
</script>

<style lang="less" scoped>
.mainContainer {
  height: 100%;
}

.tabContainer {
  height: 100%;
  gap: 16px;
  display: inline-block;
  margin-right: 20px;
}

.verticalTabs {
  width: 180px;
  border-radius: 4px;
  overflow: hidden;

  .tabTitle {
    height: 48px;
    line-height: 48px;
    padding: 0 20px;
    font-size: 16px;
    color: #fff;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
  }

  .tabList {
    .tabItem {
      height: 48px;
      line-height: 48px;
      padding: 0 20px;
      cursor: pointer;
      position: relative;
      color: rgba(255, 255, 255, 0.65);
      transition: all 0.3s;
      text-align: right;

      &:hover {
        color: #fff;
        background-color: rgba(255, 255, 255, 0.08);
      }

      &.active {
        color: #fff;
        background-color: rgba(24, 144, 255, 0.2);
        &::before {
          content: "";
          position: absolute;
          right: 0;
          top: 0;
          bottom: 0;
          width: 3px;
          background-color: #1890ff;
        }
      }
    }
  }
}

.headerArea {
  margin-bottom: 16px;
}

.timePeriods {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

:deep(.ant-table) {
  .ant-btn {
    padding: 4px 5px;
  }
}
</style>
